<template>
	<view class="waterfall">
		<view class="list" v-for="(item,index) in list" :key='index' @tap="proUrl(item.productId) ">
			<view class="l">
				<image :src="item.originalImg" mode="widthFix"></image>
			</view>
			<view class="r">
				<text class="title">{{item.productName}}</text>
				<view class="sku" v-if="false">21312313</view>
				<view class="foot">
					<view>
						<image src="https://wx.hnlxyj.com/web/v2.0/static/image/caption/capital_icon1.png" mode="widthFix" class="timeImg"></image>
						<text class="price">{{item.productmMinMoney}}</text>
						<text class="m" v-if="item.timeBeanMoney">+</text>
						<text class="priceS" v-if="item.timeBeanMoney">￥{{item.timeBeanMoney}}</text>
						
					</view>
					<view>
						<text class="del">￥{{item.agoraMoney}}</text>
						<text class="right">兑换量 {{item.countSales||0}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="top" @tap="top">
			<image src="/static/top.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: { // 页面列表数据
				type: Array,
				// default: []
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			top(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			proUrl(id) {
				uni.navigateTo({
					url:"/pages/timeBear/proDetails?id="+id
				})
			},
		},
		mounted() {
		}
	}
</script>

<style lang="scss">
	.list{
		background: #fff;
		padding: 20rpx;
		width:100%;
		border-top:1px solid #eee;
		margin: 0;
		.sku{
			font-size: 24rpx;
			color:#999;
			margin-top: 20rpx;
		}
		.l{
			width:260rpx;
			height:260rpx;
			border-radius: 20rpx;
			overflow:hidden;
			image{
				width: 100%;
				vertical-align: top;
			}
		}
		>view{
			vertical-align: top;
			display: inline-block;
		}
		.r{
			width:430rpx;
			margin-left:20rpx;
			font-size: 28rpx;
			position:relative;
			height:260rpx;
			.foot{
				bottom: 0;
				width: 100%;
				position:absolute;
			}
			.title{
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				max-height: 100rpx;
				display: -webkit-box;
				text-overflow: ellipsis;
			}
			.m{
				font-size: 24rpx;
				margin: 0 5rpx;
			}
			.price{
				color: #f90;
			}
			.del{
				color:#999;
				font-size: 11px;
				    text-decoration: line-through;
			}
			.right{
				position: absolute;
				right: 0;
				font-size: 22rpx;
			}
		}
		.timeImg{
			width:40rpx;
			height:40rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}
	}
	
	.top {
		position: fixed;
		bottom: 120rpx;
		z-index: 1000000;
		right: 20rpx;
		background: #fff;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		image {
			width: 64rpx;
		}
	}
	/* #ifdef APP-PLUS */
	 .waterfall{
		 padding-top: 40rpx;
	 }
	/* #endif */

</style>
